<template>
<div class="supplementary">
  <Alert>开启这个功能，免去小金额补款确认，有效的提高效率。</Alert>

  <div class="table-wrap">
    <div class="table">
      <div class="table-header">
        <Row>
          <Col span="6">
            <div class="th">授权类型</div>
          </Col>
          <Col span="4">
            <div class="th">单笔限额</div>
          </Col>
          <Col span="4">
            <div class="th">每日封顶</div>
          </Col>
          <Col span="4">
            <div class="th">剩余额度</div>
          </Col>
          <Col span="4">
            <div class="th">状态</div>
          </Col>
          <Col span="2">
            <div class="th">操作</div>
          </Col>
        </Row>
      </div>
      <div class="table-content">
        <Row class="table-tr tr-active">
          <Col span="6">
            <div class="td">
              国内运费授权
            </div>
          </Col>
          <Col span="4">
            <div class="td">
              ¥ 0.00
            </div>
          </Col>
          <Col span="4">
            <div class="td">
              ¥ 0.00
            </div>
          </Col>
          <Col span="4">
            <div class="td">
              ¥ 0.00
            </div>
          </Col>
          <Col span="4">
            <div class="td">
              <i-switch size="large"></i-switch>
            </div>
          </Col>
          <Col span="2">
            <div class="td">
              <Button @click="modal1 = true" size="small" long>修改</Button>
            </div>
          </Col>
        </Row>
      </div>
    </div>
  </div>
  <Modal
      class-name="vertical-center-modal"
      class="pop"
      v-model="modal1"
      title="补款授权"
  >
    <div class="pop-content">
      <div class="set-num">
        <span>单笔上限 </span>
        <InputNumber v-model="value11" controls-outside></InputNumber>

      </div>
      <div class="set-num">
        <span>每日封顶 </span>
        <InputNumber v-model="value11" controls-outside></InputNumber>
      </div>
    </div>
  </Modal>
</div>
</template>

<script>
export default {
  name: "supplementary",
  data() {
    return {
      modal1: false
    }
  }
}
</script>

<style scoped lang="less">
.table-wrap {
  margin-top: 32px;
  .table {
    &-header {
      padding: 12px;
      background: @t-table-header-bg;
      .th {
        color: @t-title-color;
        font-size: 14px;
        font-weight: 600;
        .all {
          cursor: pointer;
        }
      }
    }
    &-content {
      border-top: 1px solid @t-table-border-color;
      .table-tr {
        display: flex;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid @t-table-border-color;
        color: @t-text-color;
        font-size: 14px;
        .fun {
          span {
            margin-right: 24px;
            color: @t-title-color;
            cursor: pointer;
          }
          .tag {
            border-radius: 4px;
            background: @primary-color;
            color: #FFFFFF;
            padding: 2px 4px;
          }
        }
      }
    }
  }
}
.pop {
  .set-num {
    color: @t-text-color;
    margin-top: 24px;
    &:first-child {
      margin-top: 0px;
    }
    span {
      margin-right: 12px;
    }
  }
}
</style>